{% extends "index.html" %}

{% block content %}




								<div class="row">
									<div class="col-xs-12">
										<a href="/addServer/">
											<botton class="btn btn-primary  pull-right">
											<i class="icon-arrow-right icon-plus"></i>
													新增宿主机
											</botton>	
										</a>									
										
										
										<h3 class="header smaller lighter blue">
											<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
											宿主机列表
										</h3>
										<div class="table-header">
											当前可操作的宿主机
										</div>
										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
															主机名
														</th>
														<th>管理IP地址</th>
														<th>CPU个数</th>
														<th class="hidden-480">内存(MB)</th>

														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															实例个数
														</th>

														<th class="hidden-480">状态</th>

														<th class="col-sm-2">操作</th>
													</tr>
												</thead>

												<tbody>
												{% for ds in dataList %}
													<tr>
														<td >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
																<a href="/viewServer/{{ds.id}}/">
																	{{ ds.hostname }}
																</a>
															</label>														
															
														</td>

														<td>
															{{ ds.server_ip }}
														</td>
														<td class="col-xs-1">
															{{ ds.cpu_total }}
																														
														</td>
														<td class="hidden-480">
															{{ ds.mem }}	
																												
														</td>
														<td>
															<span class="badge badge-success">{{ ds.instance }}</span>
															
														</td>
														<td class="hidden-480">
															{% if ds.status == 0 %}
																<span class="label label-success arrowed">
																	Online
																</span>
															{% else %}
																<span class="label label-danger arrowed-in">
																	Offline
																</span>												
															{% endif %}															
															
														</td>

														<td>
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																<div class="btn-group">
																	<button data-toggle="dropdown" class="btn btn-inverse btn-sm dropdown-toggle">
																		<i class="icon-pencil bigger-130"> </i>
																		<span class="icon-caret-down icon-on-right"></span>
																	</button>
					
																	<ul class="dropdown-menu dropdown-info pull-right">
																															
																							
																		<li>
																			<a href="/addInstance/">添加主机</a>
																		</li>
																		<li>
																			<a href="/configNetwork/{{ ds.id }}/">管理网络</a>
																		</li>			
																		<li class="divider"></li>
																		
																		<li>
																			<a href="/viewServer/{{ds.id}}/">资源分配</a>
																		</li>
	
																		<li>
																			<a href="javascript:" onclick="onBtnHandleServer(this,{{ ds.id  }},'delete','{{ ds.server_ip }}')">删除主机</a>
																		</li>																	
					
<!-- 																		<li> -->
<!-- 																			<a href="#">配置</a> -->
<!-- 																		</li> -->
																	</ul>
																</div>												
															</div>																			
														</td>

													</tr>
												{% endfor %}
												</tbody>
											</table>
										</div>
									</div>
								</div>	

	

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>


		<!-- page specific plugin scripts -->

		<script src="/static/js/jquery.dataTables.min.js"></script>
		<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

		<script type="text/javascript">

			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})
			
	   function onBtnHandleServer(obj,id,op,hostname){
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			if( op == 'delete' ){
				var txt=  "是否确认删除？"
			}			
			var option = {
					title: "删除宿主机("+hostname+")",
					btn: parseInt("0011",2),
					onOk: function(){
						$.ajax({
							  type: 'DELETE',
							  url: '/api/vmserver/'+ id +'/',
						      success:function(response){	
						    	  	btnObj.removeAttr('disabled');
					                window.wxc.xcConfirm('删除成功', window.wxc.xcConfirm.typeEnum.success);
					                window.location.reload();
							},
				            error:function(response){
				            	btnObj.removeAttr('disabled');
				            	window.wxc.xcConfirm("删除失败", window.wxc.xcConfirm.typeEnum.error);
				            },		
							});
					},
					onCancel:function(){	
					},
					onClose:function(){
					}
				}			
			window.wxc.xcConfirm(txt, "custom", option);
		}			

</script>


			
{% endblock %}

